<template>
  <el-row :gutter="20">
    <el-col :span="24" style="padding: 0 20px;margin-bottom: 10px">
      <el-card class="box-card main-flow">
        <div slot="header" class="clearfix">
          <span style="float: left">今日流量</span>
          <span style="float: right">更新于2020-02-02 16：00</span>
        </div>
        <div class="main-flow-body" style="padding:30px 0;">
          <div class="main-flow-left-title" style="width:10%;float:left;">
            <span>　</span>
            <span>今日</span>
            <span>昨日</span>
          </div>
          <div class="main-flow-right-data" style="float:left;width:18%;" v-for="(d,index) in todayFlow" :key="d.id">
            <span>{{d.title}}</span>
            <span style="font-family: '微软雅黑';font-size: 30px; font-weight: 400;padding-top:20px;color:#000;">{{d.todayData}}</span>
            <span style="font-family: '微软雅黑';font-size: 30px; font-weight: 400;padding-top:20px;color:#000;">{{d.yesterdayData}}</span>
          </div>
        </div>
      </el-card>
    </el-col>
    <el-col :span="24" style="margin-bottom: 10px">
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix" style="position:relative;">
            <span style="float: left">浏览量</span>
            <el-date-picker
              style="position:absolute;right: 0;top: -10px"
              v-model="date"
              align="right"
              type="date"
              placeholder="选择日期"
              :picker-options="pickerOptions">
            </el-date-picker>
          </div>
          <div ref="visitNum" style="height: 300px;padding-bottom: 60px;"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix" style="position:relative;">
            <span style="float: left">企业访问量排行榜</span>
            <el-date-picker
              style="position:absolute;right: 0;top: -10px"
              v-model="date"
              align="right"
              type="date"
              placeholder="选择日期"
              :picker-options="pickerOptions">
            </el-date-picker>
          </div>
          <ul style="height: 360px;">
            <li v-for="d in enterpriseList" :key="d.id" style="line-height: 30px;">
              {{d.title}}
              <span style="float: right">{{d.visitNum}}</span>
            </li>
          </ul>
        </el-card>
      </el-col>
    </el-col>
    <el-col :span="24" style="margin-bottom: 10px">
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix" style="position: relative">
            <span style="float: left">课程分类销售统计</span>
            <el-date-picker
              style="position:absolute;right: 0;top: -10px"
              v-model="date"
              align="right"
              type="date"
              placeholder="选择日期"
              :picker-options="pickerOptions">
            </el-date-picker>
          </div>
          <div ref="courseNum" style="height: 300px;padding-bottom: 60px;"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix" style="position: relative">
            <span style="float: left">搜索词排行榜</span>
            <el-date-picker
              style="position:absolute;right: 0;top: -10px"
              v-model="date"
              align="right"
              type="date"
              placeholder="选择日期"
              :picker-options="pickerOptions">
            </el-date-picker>
          </div>
          <ul style="height: 360px;">
            <li>
              搜索词
              <span style="float: right;width: 20%;">浏览量</span>
              <span style="float: right;width: 20%;">占比</span>
            </li>
            <li v-for="d in searchStringRankList" :key="d.id" style="line-height: 30px;">
              {{d.searchString}}
              <span style="float: right;width: 20%;">{{d.visitNum}}</span>
              <span style="float: right;width: 20%;">{{d.proportion}}</span>
            </li>
          </ul>
        </el-card>
      </el-col>
    </el-col>
    <el-col :span="24" style="padding: 0 20px;margin-bottom: 10px">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span style="float: left">
            <el-radio v-model="type" label="1">访问量（PV）</el-radio>
            <el-radio v-model="type" label="2">访问次数</el-radio>
            <el-radio v-model="type" label="3">访客数</el-radio>
          </span>
          <span style="float: right;">
            <el-button type="primary" @click="importData">导入数据</el-button>
          </span>
        </div>
        <el-col :span="12" style="padding: 0 20px;margin-bottom: 10px">
          <div ref="map" style="height: 300px;padding-bottom: 60px;"></div>
        </el-col>
        <el-col :span="12" style="padding: 0 20px;margin-bottom: 10px">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <el-col :span="8">省份</el-col>
              <el-col :span="8">浏览量（PV）</el-col>
              <el-col :span="8">占比</el-col>
            </div>
            <ul style="line-height: 30px;">
              <li v-for="d in provinceList" style="text-align: center"
                  v-show="searchStringRankList.length">
                <el-col :span="8">{{d.searchString}}</el-col>
                <el-col :span="8">{{d.visitNum}}</el-col>
                <el-col :span="8">{{d.proportion}}</el-col>
              </li>
            </ul>
          </el-card>
        </el-col>
      </el-card>
    </el-col>
    <el-col :span="24">
      <div ref="data" style="height: 300px;padding-bottom: 60px;"></div>
    </el-col>
  </el-row>
</template>

<script>
  import china from '../../assets/js/china'
  import Util from '@/utils/util'
  export default {
    name: "index",
    data() {
      return {
        date: "",
        type: '1',
        pickerOptions: new Date(),
        todayFlow: [
          {id: 1, title: '新增用户数', todayData: 5, yesterdayData: 20},
          {id: 2, title: '新增企业数', todayData: 5, yesterdayData: 20},
          {id: 3, title: '新增课程数', todayData: 5, yesterdayData: 20},
          {id: 4, title: '学习总时长（分钟）', todayData: 5, yesterdayData: 20},
          {id: 5, title: '浏览量', todayData: 5, yesterdayData: 20},
        ],
        enterpriseList: [
          {title: '阿里巴巴', visitNum: 300},
          {title: '腾讯科技', visitNum: 300},
          {title: '华为', visitNum: 300},
          {title: '谷歌', visitNum: 300},
          {title: '微软', visitNum: 300},
          {title: '亚马逊', visitNum: 300},
          {title: '京东科技', visitNum: 300},
          {title: '饿了么', visitNum: 300},
          {title: '美团', visitNum: 300},
          {title: '360科技', visitNum: 300},
          {title: '小米科技', visitNum: 300}
        ],
        searchStringRankList: [
          {searchString: '办公软件', visitNum: 300, proportion: '30%'},
          {searchString: '演讲', visitNum: 300, proportion: '30%'},
          {searchString: '情绪管理', visitNum: 300, proportion: '30%'},
          {searchString: '职场抗压', visitNum: 300, proportion: '30%'},
          {searchString: '市场营销', visitNum: 300, proportion: '30%'},
          {searchString: '团队管理', visitNum: 300, proportion: '30%'},
          {searchString: '人事管理', visitNum: 300, proportion: '30%'},
          {searchString: '培训管理', visitNum: 300, proportion: '30%'},
          {searchString: '财务管理', visitNum: 300, proportion: '30%'},
          {searchString: '招聘管理', visitNum: 300, proportion: '30%'},
        ],
        provinceList: [
          {searchString: '浙江省', visitNum: 300, proportion: '30%'},
          {searchString: '江苏省', visitNum: 300, proportion: '30%'},
          {searchString: '湖北省', visitNum: 300, proportion: '30%'},
          {searchString: '上海市', visitNum: 300, proportion: '30%'},
          {searchString: '北京市', visitNum: 300, proportion: '30%'},
          {searchString: '山东省', visitNum: 300, proportion: '30%'},
          {searchString: '河南省', visitNum: 300, proportion: '30%'},
          {searchString: '黑龙江省', visitNum: 300, proportion: '30%'},
          {searchString: '福建省', visitNum: 300, proportion: '30%'},
          {searchString: '广东省', visitNum: 300, proportion: '30%'},
        ],
        visitNumChart:null,
        courseNumChart:null,
        map:null,
      }
    },
    mounted() {
      this.initVisitNumChart();
      this.initCourseNumChart();
      this.createMap();
      let that = this;
      setTimeout(function () {
        that._resize()
      },2000)
      console.log(Util)
    },
    methods: {
      initVisitNumChart() {
        const _visitNum = this.$refs.visitNum;
        if (!_visitNum) return
        this.visitNumChart = this.$echarts.init(_visitNum)
        this.visitNumChart.setOption({
          color: ["#36ACA7"],
          grid: {
            left: '0',
            right: '0',
            bottom: '0',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            lineStyle: {
              // color: 'green',
              width: 3
            },
          }]
        })
      },
      initCourseNumChart() {
        const _courseNum = this.$refs.courseNum;
        if (!_courseNum) return
        this.courseNumChart = this.$echarts.init(_courseNum)
        this.courseNumChart.setOption({
          color: ['#3398DB'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: '0',
            right: '0',
            bottom: '0',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: ['管理类', '营销类', '市场类', '领导力', '心理学', '办公技能', '职业资格',],
              axisTick: {
                alignWithLabel: true
              }
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '直接访问',
              type: 'bar',
              barWidth: '60%',
              data: [10, 52, 200, 334, 390, 330, 220]
            }
          ]
        })
      },
      createMap() {
        this.$echarts.registerMap('china', china)
        this.map = this.$echarts.init(this.$refs.map)
        this.map.setOption({
          tooltip: {
            formatter: function (params, ticket, callback) {
              return params.seriesName + '<br />' + params.name + '：' + params.value
            }
          },
          visualMap: {
            min: 0,
            max: 1500,
            left: 'left',
            top: 'bottom',
            text: ['高', '低'],
            inRange: {
              color: ['#e0ffff', '#006edd']
            },
            show: true
          },
          geo: {
            map: 'china',
            roam: false,
            zoom: 1.23,
            label: {
              normal: {
                show: true,
                fontSize: '10',
                color: 'rgba(0,0,0,0.7)'
              }
            },
            itemStyle: {
              normal: {
                borderColor: 'rgba(0, 0, 0, 0.2)'
              },
              emphasis: {
                areaColor: '#F3B329',
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 20,
                borderWidth: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          },
          series: [
            {
              name: '信息量',
              type: 'map',
              geoIndex: 0,
              data: [
                {name: "南海诸岛", value: 0},
                {name: '北京', value: 1},
                {name: '天津', value: 3},
                {name: '上海', value: 4},
                {name: '河北', value: 6},
                {name: '山西', value: 7},
                {name: '辽宁', value: 8},
                {name: '吉林', value: 9},
                {name: '黑龙江', value: 10},
                {name: '江苏', value: 12},
                {name: '浙江', value: 22},
                {name: '安徽', value: 42},
                {name: '福建', value: 44},
                {name: '江西', value: 42},
                {name: '山东', value: 54},
                {name: '河南', value: 47},
                {name: '湖北', value: 423},
                {name: '湖南', value: 4213},
                {name: '广东', value: 122},
                {name: '广西', value: 114},
                {name: '海南', value: 1212},
                {name: '四川', value: 52231},
                {name: '贵州', value: 1134},
                {name: '云南', value: 542},
                {name: '陕西', value: 1432},
                {name: '甘肃', value: 1121},
                {name: '青海', value: 4433},
                {name: '台湾', value: 421},
                {name: '新疆', value: 12},
                {name: '西藏', value: 12443},
                {name: '内蒙古', value: 52313},
                {name: '重庆', value: 13311},
                {name: '宁夏', value: 433},
                {name: '澳门', value: 433},
                {name: '香港', value: 433},

              ]
            }
          ]
        })
      },
      _resize(){
        let that = this;
        window.addEventListener("resize", function () {
          that.visitNumChart.resize()
          that.courseNumChart.resize()
          that.map.resize()
        })
        this.$on('hook:destroyed', () => {
          window.removeEventListener("resize", function () {
            that.visitNumChart.resize();
            that.courseNumChart.resize();
            that.map.resize();
          });
        })
      },
      importData(){
        let _this = this;
        Util.XLSXRender({}, "image/jpg;image/jpeg;image/png;image/gif;image/bmp;", 500, function (data) {
          if (!data) return;
          // var source = [
          //   ['product']
          // ];
          var source = [];
          console.log(data)
          var a = {};
          for(let i in data){
            // source[0].push(data[i].__EMPTY);
            for(let key in data[i]) {
              if(!a[key])a[key] = [key]
              a[key].push(data[i][key])
            }
          }
          for(let i in a){
            source.push(a[i])
          }
          _this.initData(source)

        })
      },

      initData(source){
        const _data = this.$refs.data;
        if (!_data) return;
        this._data = this.$echarts.init(_data)
        this._data.setOption({
          legend: {},
          tooltip: {},
          dataset: {
            source: source
          },
          xAxis: {type: 'category'},
          yAxis: {},
          // Declare several bar series, each will be mapped
          // to a column of dataset.source by default.
          series: [
            {type: 'bar'},
            {type: 'bar'},
            {type: 'bar'}
          ]
        })
        console.log(44444)
      }
    }
  }
</script>

<style lang="scss" scoped>
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;

    li {
      width: 100%;
      text-align: left;
    }
  }

  .el-row {
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .el-col {
    border-radius: 4px;
  }

  .bg-purple-dark {
    background: #99a9bf;
  }

  .bg-purple {
    background: #d3dce6;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 100%;
  }


  .main-flow {
    overflow: hidden;
  }

  .main-flow .main-flow-header {
  }

  .main-flow .main-flow-header .header-right {
    float: right;
    position: relative;
  }

  .main-flow .main-flow-header .layui-icon {
    left: -20px;
  }

  .main-flow .main-flow-body .main-flow-left-title {
    span {
      height: 40px;
      line-height: 40px;
      box-sizing: border-box;
      margin-top: 20px;
    }

    span:first-child {
      height: 21px;
      line-height: 21px;
      margin: 0;
    }
  }

  .main-flow .main-flow-body .main-flow-right-data {
    overflow: hidden;
  }

  .main-flow .main-flow-body {
    overflow: hidden;
  }

  .main-flow .main-flow-body span {
    display: block;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

</style>
